<template>
  <div class="nav-header">
    <div class="nav-header-left">
      <i
        class="fold-menu"
        :class="isFold ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
        @click="handleFoldClick"
      ></i>
      <div>
        <breadcrumb :breadcrumbs="breadcrumbs" />
      </div>
    </div>
    <div class="nav-header-right">
      <el-dropdown>
        <span class="el-dropdown-link"> {{ name }} </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleExit">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import breadcrumb from '@/base-ui/breadcrumb'
import { currentBreadMenu } from '@/utils/map-menus'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import cache from '@/utils/cache'

export default defineComponent({
  emits: ['foldChange'],
  components: {
    breadcrumb
  },
  setup(props, { emit }) {
    const isFold = ref(false)
    const router = useRouter()
    const handleFoldClick = () => {
      isFold.value = !isFold.value
      emit('foldChange', isFold.value)
    }
    const store = useStore()
    const breadcrumbs = computed(() => {
      const useMenus = store.state.login.userMenus
      const route = useRoute()
      const currentPath = route.path
      return currentBreadMenu(useMenus, currentPath)
    })
    const name = computed(() => store.state.login.userInfo.name)
    const handleExit = () => {
      cache.removeCache('token')
      router.push('/main')
    }
    return {
      isFold,
      handleFoldClick,
      breadcrumbs,
      handleExit,
      name
    }
  }
})
</script>

<style scoped lang="less">
.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  &-left {
    flex: 1;
    display: flex;
    .fold-menu {
      margin-right: 10px;
    }
  }
  &-right {
    width: 100px;
    text-align: right;
  }
}
</style>
